<template>
	<view class="container">
		<view class="head">
			<view class="title">
				业务端选择
			</view>
			<view class="tip">
				请选择业务端进行账号密码登录
			</view>

		</view>
		<view class="items">
			<block v-for="end in endTypeList" :key="end">
				<!-- // 1--company 运企管理  2--driver 司机端  3--terminal_sign 消纳端  4--terminal_manage 消纳管理端 -->
				<view class="item" v-if="end === 'terminal_manage'" @click="goHome(end)">
					<view class="left">
						<image class="img" src="@/static/img/end/consumptionAdmin.png"></image>
						<view class="name">
							消纳管理端
						</view>
					</view>
					<view class="right">
						<image class="icon" src="@/static/img/end/enter.png"></image>
					</view>

				</view>
				<view class="item" v-if="end === 'terminal_sign'" @click="goHome(end)">
					<view class="left">
						<image class="img" src="@/static/img/end/consumption.png"></image>
						<view class="name">
							消纳员工端
						</view>
					</view>
					<view class="right">
						<image class="icon" src="@/static/img/end/enter.png"></image>
					</view>

				</view>
				<view class="item" v-if="end === 'company'" @click="goHome(end)">
					<view class="left">
						<image class="img" src="@/static/img/end/firm.png"></image>
						<view class="name">
							运企管理端
						</view>
					</view>
					<view class="right">
						<image class="icon" src="@/static/img/end/enter.png"></image>
					</view>

				</view>
				<view class="item" v-if="end === 'driver'" @click="goHome(end)">
					<view class="left">
						<image class="img" src="@/static/img/end/driver.png"></image>
						<view class="name">
							司机端
						</view>
					</view>
					<view class="right">
						<image class="icon" src="@/static/img/end/enter.png"></image>
					</view>

				</view>
			</block>
		</view>
		<messageTip ref="myMessage" />
	</view>
</template>

<script setup lang="ts">
	// import { onLoad } from '@dcloudio/uni-app'
	import { computed, ref } from 'vue';
	import { useUserStore } from '@/stroes';
	import * as driverApi from '@/api/drivers/driver'
	import messageTip from '@/components/messageTip/messageTip.vue';
	const myMessage = ref()
	const userStore = useUserStore();
	// const endTypeList = ref(['company', 'driver', 'terminal_sign', 'terminal_manage'])
	const endTypeList = computed(() => {
		return userStore.endTypeList.map(item => item.roleCode)
	})
	// app端 // 1--company 运企管理  2--driver 司机端  3--terminal_sign 消纳端  4--terminal_manage 消纳管理端
	const goHome = (endType : string) => {
		userStore.nowEndType = userStore.endTypeList.find(item => item.roleCode === endType)
		if (userStore.nowEndType?.roleCode === 'driver') {
			driverApi.getCartsList().then(res => {
				if (res.data && res.data.code === 0) {
					userStore.cartList = res.data.data;
					if (userStore.cartList.length) {
						if (userStore.cartList.length > 1) {
							uni.navigateTo({
								url: '/pages/drivers/selectCart/selectCart?type=1'
							})
						} else {
							userStore.nowCart = userStore.cartList[0]
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					} else {
						myMessage.value.open('error', '当前司机未绑定车辆,请绑定以后再登录')
					}
				}
			})
		} else {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 218rpx 48rpx 0rpx;
		background: linear-gradient(180deg, #C5E1FF 0%, #EEF6FE 52%, #E8F5FF 100%);

		.head {
			margin-bottom: 56rpx;

			.title {
				margin-bottom: 6rpx;
				font-size: 56rpx;
				font-weight: 600;
				color: #000;
				line-height: 66rpx;
			}

			.tip {
				font-weight: 400;
				font-size: 24rpx;
				color: #989DA5;
				line-height: 28rpx;
			}
		}

		.items {
			.item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 32rpx;
				width: 100%;
				height: 160rpx;
				border-radius: 32rpx;
				border: 3rpx solid #FFFFFF;

				.left {
					display: flex;
					align-items: center;

					.img {
						margin-right: 34rpx;
						width: 184rpx;
						height: 160rpx;
					}

					.name {
						font-size: 32rpx;
						font-weight: 500;
						color: #000;
						line-height: 160rpx;

					}

				}

				.right {
					display: flex;
					align-items: center;
					padding-right: 40rpx;

					.icon {
						width: 48rpx;
						height: 48rpx;
					}
				}

			}
		}
	}
</style>